<template>
  <div class="word" ref="word">
    <div class="text">
      <h1>html-docx-js</h1>
      <p>
        This is a very small library that is capable of converting HTML
        documents to DOCX format that is used by Microsoft Word 2007 and onward.
        It manages to perform the conversion in the browser by using a feature
        called 'altchunks'. In a nutshell, it allows embedding content in a
        different markup language. We are using MHT document to ship the
        embedded content to Word as it allows to handle images. After Word opens
        such file, it converts the external content to Word Processing ML (this
        is how the markup language of DOCX files is called) and replaces the
        reference. Altchunks were not supported by Microsoft Word for Mac 2008
        and are not supported by LibreOffice and Google Docs.
      </p>

      <h1>Compatibility</h1>
      <p>
        This library should work on any modern browser that supports Blobs
        (either natively or via Blob.js). It was tested on Google Chrome 36,
        Safari 7 and Internet Explorer 10. It also works on Node.js (tested on
        v0.10.12) using Buffer instead of Blob.
      </p>
      <h1>Images Support</h1>
      <p>
        This library supports only inlined base64 images (sourced via DATA URI).
        But it is easy to convert a regular image (sourced from static folder)
        on the fly. If you need an example of such conversion you can checkout a
        demo page source (see function convertImagesToBase64).
      </p>

      <h1>For example:</h1>
      <p style="margin:40px 10px;">
        <code style="background-color:#000;color:#fff;padding:20px 10px;">
          var converted = htmlDocx.asBlob(content, {orientation: 'landscape',
          margins: {top: 720}}); 
          saveAs(converted, 'test.docx');
        </code>
      </p>
    </div>
    <div class="btn">
      <a-button type="primary" @click="exportWordDocumnet">导出Word</a-button>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";

import { asBlob } from "html-docx-js-typescript";
// if you want to save the docx file, you need import 'file-saver'
import { saveAs } from "file-saver";

@Component({
  components: {},
})
export default class Word extends Vue {
  constructor() {
    super();
  }
  public mounted() {
  }

  public exportWordDocumnet() {
    this.ExpHtmlToWord(this.$refs["word"]);
  }

  public ExpHtmlToWord(eDiv: any) {
    let htmlString: string = eDiv.innerHTML;
    asBlob(htmlString).then((data: any) => {
      saveAs(data, `file${parseInt((Math.random() * 10000).toString())}.docx`); // save as docx file
    }); // asBlob() return Promise<Blob|Buffer>
  }
}
</script>
<style lang="less" scoped>
.word {
  padding: 20px;
}
</style>